<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>我的笔记</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">

    <link href="websrc/plug-in/jQuery-mtk/css/component.css" rel="stylesheet">
    <link rel="stylesheet" href="websrc/201608301507/dist/jdialog.min.css">
    <link rel="stylesheet" href="websrc/201608301507/site/rainbow-customer.min.css">
    <link rel="stylesheet" type="text/css" href="websrc/201608301507/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="websrc/201608301507/css/htmleaf-demo.css">
    <link rel="stylesheet" type="text/css" href="websrc/css/htmleaf-demo.css">
    <link href="websrc/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="websrc/css/jquery.dialogbox.css">
    <link rel="stylesheet" href="websrc/css/common.css">
    <link rel="stylesheet" href="websrc/css/mydeck.css">
    <link rel="stylesheet" href="websrc/css/card.css">
    <link rel="stylesheet" href="websrc/css/style.css">

    <!--  <link rel="stylesheet" href="websrc/201608301507/site/style.css"> -->


    <!--下面这一大块的注释是说:"为了让IE9以下的浏览器支持响应式和HTML5标签.需要引入下面两个JS文件"-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="websrc/plug-in/hDialog/js/jquery.hDialog.js"></script>
    <script src="websrc/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="websrc/js/jquery-3.2.1.js"></script>
    <script src="websrc/js/common.js"></script>
    <script src="websrc/js/card.js"></script>
    <script src="websrc/js/editNoteType.js"></script>

    <script>


        //ajax预览卡片
        var afterPreviewDeck = function (obj) {
            alert(obj.id);
            var typeId = obj.id;
            $('#dialog-1').html('');
            $.getJSON(
                "/memorypalace/cardaction_getcardstylebynotetypeId.action?noteTypeId=" + typeId,
                {},
                function (json) {
                    $.each(json, function (i, obj) {
                        var html = '';
                        /* html +='<div class="content">'; */
                        html += '<span class="button" data-dismiss="JDialog" id="test" style="margin-left: 680px">×</span>';
                        html += '<h3>卡片样式名称：' + obj.cardStyleName + '</h3>';
                        html += '<div>';
                        html += '<p>正面版式：' + obj.frontHTML + '</p>';
                        html += '<ul>';
                        html += '<li><strong>反面版式:</strong>' + obj.backHTML + '</li>';
                        html += '<li><strong>样式:</strong>' + obj.css + '</li>';
                        html += '</ul>';
                        /* html += '</div>';  */
                        $('#dialog-1').append(html);
                        $('#dialog-1').trigger("create");
                    });
                });
            /* 	$('.content .button').append("<br />卡片样式名称："+obj.cardStyleName+" 正面版式："+obj.frontHTml+" 反面版式："+obj.backHTML+" 生日："+obj.css);
             });
             } */

        };


     
		$.ajax({
	        'url': '/memorypalace/getuser.action',
	        'type': 'GET',
	        'success': function (userJSON) {
                //alert("一登陆");
                
                var userObj = JSON.parse(userJSON);
                var h = '<span style="padding-right:10px">'+userObj.userName+'</span>'+
    				'<a href="/memorypalace/loginout.action">退出</a>';
				$("#userUL").html(h);
	        },
	        'error':function (){
                //alert("未登录");
                var h = '<a href="login.jsp">登录</a>'+
				'<a href="register.jsp">注册</a>';
				$("#userUL").html(h);
	        }
	    });
    </script>
    <style id="cardCss"></style>

</head>
<body style="background-color: white;">
<!--导航栏-->
<div class="header clearfix">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand header-left clearfix" href="#">
                    <div class="logo">LOGO</div>
                    <div class="projectName">记忆宫殿</div>
                    <div class="projectEnglishName">Memory Palace</div>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/memorypalace/index-login.html">个人首页</a></li>
                    <li><a href="/memorypalace/study/getsl.action">学习列表</a></li>
                    <li class="active">
                        <a href="/memorypalace/mydeck.html">浏览牌组</a></li>
                    <li><a href="/memorypalace/myknowledgetree.html">知识体系</a></li>

                </ul>

                <ul id="userUL" class="nav navbar-nav navbar-right" style="padding-top: 28px;padding-right: 10px">
					
				<!-- 	<c:if test="${users.userId==null}">
							<a href="login.jsp">登录</a>
							<a href="register.jsp">注册</a>
						</c:if>
					<c:if test="${users.userId!=null}">
						<span>${users.userName}</span>
						<a href="/memorypalace/loginout">退出</a>
					</c:if>			 -->
		
				</ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<!--路径导航-->
<ol class="breadcrumb clearfix">
    <li><a href="/memorypalace/mydeck.html">牌组浏览</a></li>
    <li class="active" id="currentDeckName"></li>
    <div style="float: right;">
        <a id="addNoteA" class="md-trigger" hidden data-modal="editNoteHBox"><span>新增</span></a>
        <a id="editNoteA" class="md-trigger" hidden data-modal="editNoteHBox"><span>编辑</span></a>
        <!--<a href="javascript:;" class="md-trigger btn btn-primary"-->
           <!--data-modal="editNoteType" onclick="showeditNoteTypeView()">编辑笔记类型</a>-->
        <img onclick="beforeAddNote()" style="width: 30px;height:30px" src="websrc/img/add.png">
    </div>
    <div class="input-group" style="float: right;width: 300px;">
        <span class="input-group-addon" id="sizing-addon2">搜索</span>
        <input id="searchTextInput"style="width: 200px" type="text" class="form-control"
               placeholder="搜索笔记内容" aria-describedby="sizing-addon2"
               onchange="getNoteData(undefined,1);"
        >
    </div>
</ol>
<!--浏览主体-->
<div class="container" style="background-color: #F8F8F8">
    <div id="products" class="row list-group" style="margin-bottom: 0">

    </div>
    <nav aria-label="Page navigation" style="height: 34px">
        <ul class="pagination" style="margin: 0" id="pageNav">
            <!--<li>-->
                <!--<a href="#" aria-label="Previous">-->
                    <!--<span aria-hidden="true">&laquo;</span>-->
                <!--</a>-->
            <!--</li>-->
            <!--<li><a href="#">1</a></li>-->
            <!--<li><a href="#">2</a></li>-->
            <!--<li>-->
                <!--<a href="#" aria-label="Next">-->
                    <!--<span aria-hidden="true">&raquo;</span>-->
                <!--</a>-->
            <!--</li>-->
        </ul>
    </nav>
</div>

<!--编辑笔记类型的弹窗-->
<div class="md-modal md-effect-1" id="editNoteType">
    <div class="md-content ">
        <h3>编辑笔记类型</h3>
        <div class="clearfix" style="padding: 0;min-height: 248px">
            <div id="noteTypeList">
                <ul class="list-group">
                    <!--笔记类型列表-->
                </ul>
            </div>
            <div id="noteTypeEditBtnList">
                <ul class="list-group">
                    <li class="list-group-item">
                        <button class="md-trigger btn btn-default" data-modal="createNewNoteType">新增</button>
                    </li>

                    <li class="list-group-item">
                        <button class="md-trigger btn btn-default" data-modal="editNoteArea"
                                onclick="showeditNoteArea()">编辑区域和名称
                        </button>
                    </li>
                    <li class="list-group-item">
                        <button class="btn btn-default" onclick="showeditNoteTypePage()">编辑卡片</button>
                    </li>
                    <li class="list-group-item">
                        <button class="btn btn-default" onclick="deleteNoteType()">删除</button>
                    </li>
                </ul>
            </div>
        </div>
        <a class="md-close" style="font-size: 22px;">x</a>
    </div>
</div>

<!--弹窗的遮罩-->
<div class="md-overlay" data-modal="editNoteType"></div>

<!--编辑笔记区域-->
<div class="md-modal md-effect-1" id="editNoteArea">
    <div class="md-content ">
        <h3>编辑笔记区域</h3>
        <div class="clearfix" style="width: 300px;padding: 0 20px 20px 20px;">
            <span>名称</span>
            <input id="noteTypeNameInput" style="width:100%;margin: 10px 0;">
            <span>笔记区域之间用英文逗号隔开</span><br><span style="color: #9c9c9c">第一个区域为"标题"</span>
            <br>
            <input id="areaNamesInput" oninput="areaNamesInputOnChange(this)"
                   onpropertychange="areaNamesInputOnChange(this)"
                   style="width: 100%;margin:10px 0">
            <br>
            <div id="areaErrorTip"></div>
            <button class="btn btn-success" style="float: right;" onclick="editNoteTypeArea()">确定</button>
        </div>
        <a id="editNoteAreaClose" class="md-close" style="font-size: 22px;"><span>x</span></a>
    </div>
</div>

<link rel="stylesheet"
      href="websrc/css/editnote.css">
<script src="websrc/js/editnote.js"></script>

<!--笔记新增弹窗-->
<div id="editNoteHBox" class="md-modal md-effect-1">
    <div class="md-content ">
        <div class="row">
            <input type="hidden" id="noteId">
            <div class="col-lg-4">
                <!--标题-->
                <h2>新增笔记</h2>
            </div><!--end/.col-lg-4-->
            <div class="col-lg-2">
            </div><!--end/.col-lg-2-->
            <div class="col-lg-3 myline">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon3">笔记类型</span>
                    <div class="input-group-btn" aria-describedby="sizing-addon3">
                        <button id="noteTypeId" type="button"
                                class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            基础正反<span class="caret" style="margin-left:0.5em"></span>
                        </button>
                        <ul class="dropdown-menu" id="noteTypeIdList">
                            <li><a href="javascript:changeDropDownBtnValue('基础正反','knowledgeType','')">基础正反</a></li>
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div><!--/col-lg-4-->
            <div class="col-lg-3 myline">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon3"> 牌 组 </span>
                    <div class="input-group-btn" aria-describedby="sizing-addon3">
                        <button id="deckNameId" type="button"
                                class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            节点<span class="caret" style="margin-left:0.5em"></span>
                        </button>
                        <ul class="dropdown-menu" id="deckNameIdList">
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
        </div><!--end/.row-->
        <div id="areaContentsDivid">
            <div id="areaContentId">
                <h4>正面</h4>
                <textarea>

                </textarea>
            </div>
        </div><!--end/#areaContentsDivid-->
        <div class="row myline">
            <div class="col-lg-8"></div>
            <div class="col-lg-2">
                <button id="editNoteConfirmBtn" type="button"
                        class="btn btn-default"  style="width: 100%">
                    确定
                </button>
            </div>
            <!-- 确认按钮结束 -->
            <div class="col-lg-2">
                <button type="button" class="btn btn-danger" style="width: 100%"
                    onclick="cancelEditNote()">
                    取消
                </button>
            </div>
        </div>
        <a class="md-close" style="display: none"><span>x</span></a>
    </div>
</div>
<div class="md-overlay" data-modal="editNoteHBox"></div>

<!--弹窗的遮罩-->
<div class="md-overlay" data-modal="editNoteArea" z-index-plus="1000"></div>

<!--新增笔记类型的弹窗-->
<div id="createNewNoteType" class="md-modal md-effect-1">
    <div class="md-content ">
        <h3>新增笔记类型</h3>
        <div class="clearfix" style="width: 300px;padding: 0 20px 10px 20px;">
            <input id="newNoteTypeInput" style="width: 100%;margin:10px 0">
            <br>
            <button class="btn btn-success" style="float: right;" onclick="createNewNoteType()">确定</button>
        </div>
        <a id="createNewNoteTypeClose" class="md-close" style="font-size: 22px;"><span>x</span></a>
    </div>
</div>
<div class="md-overlay" data-modal="createNewNoteType" z-index-plus="1000"></div>

<!--笔记预览弹窗-->
<a id="notePreviewA" class="md-trigger" hidden data-modal="notePreview"><span>预览</span></a>

<div id="notePreview" class="md-modal">
    <div class="md-content" style="padding: 20px 10px;cursor: pointer">
        <div class="card" style="min-height: 529px;min-width: 500px">

        </div>
        <a class="md-close" hidden style="font-size: 22px;"><span>x</span></a>
    </div>
</div>

<div class="md-overlay" ></div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="websrc/js/bootstrap.min.js"></script>

<script src="websrc/201608301507/site/rainbow-custom.min.js"></script>
<script src="websrc/201608301507/dist/jdialog.min.js"></script>
<script type="text/javascript">
    $("#dialog-1").jDialog({
        skinClassName: 'demo',
        animationType: 'fade-in'
    });

</script>
<script src="websrc/plug-in/jQuery-mtk/js/classie.js"></script>
<script src="websrc/plug-in/jQuery-mtk/js/modalEffects.js"></script>
<script src="websrc/js/common.js"></script>
</body>
</html>